<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>用户登录界面</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/signin.css}" rel="stylesheet">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript">
        function refresh(){
            const src ="/getVerifyCode?" + new Date().getTime(); //加时间戳，防止浏览器利用缓存
            $("#imgValidate").attr("src", src);
        }
    </script>
</head>
<body class="text-center">
<!--  用户登录form表单 -->
<form class="form-signin" th:action="@{/login}" method="post">
    <img class="mb-4" th:src="@{/upload/壁纸.jpg}" width="72" height="72"/>
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">教材管理系统</h1>
    <input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required autofocus=""/>
    <input type="password" class="form-control"    th:placeholder="#{login.password}"  name="password" required/>
    <input type="text" class="form-control"  th:placeholder="#{login.code}" style="height:34px;" name="code"/>
    <img id="imgValidate"  th:src="@{getVerifyCode}" onclick="refresh()"/>
    <br/>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" name="rememberme"> [[#{login.rememberme}]]
        </label>
    </div>
    <div style="font-size:18px;color: #fe561f">[[*{session.msg}]]</div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登录</button>
    <p class="mt-5 mb-3 text-muted">© <span th:text="${#dates.year(new java.util.Date())}">2023</span>-<span th:text="${#dates.year(new java.util.Date())}+1">2024</span></p>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>
</form>
</body>
</html>
